<template>
	<view>
		<view class="record_box" v-for="(item , index) in recordList" :key='item.id'>
			<view class="aside_top">
				<view class="left_content">
					<view :class="item.type==1?'buy_tab':'sell_tab'">{{item.type==1?'买':'卖'}}</view>
					<view class="coin_name">
						<text class="blod">{{name}}</text>
						<text class="f32 c333 shu">/</text>
						<text class="f28 c333">USDT</text>
					</view>
					<view class="time f24 c999">{{item.createTime | time}}</view>
					<view class="order_status">
						{{item.state | status}}
					</view>
				</view>
			</view>
			<view class="aside_bot f24">
				<view class="entrust_number">
					<view class="c666 m_right">委托总量</view>
					<view class="c333">{{item.totalNum}}</view>
				</view>
				<view class="entrust_price">
					<view class="c666 m_right">委托价格</view>
					<view class="c333">{{item.exchange}}</view>
				</view>
			</view>
			<view class="aside_bot f24">
				<view class="entrust_number">
					<view class="c666 m_right">成交数量</view>
					<view class="c333">{{item.dealNum}}</view>
				</view>
				<view class="entrust_price">
					<view class="c666 m_right">订单编号</view>
					<view class="c333">{{item.orderno}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList:[]
			}
		},
		onLoad(e) {
			this.name=e.name
			this.getEntrusHistory()
		},
		methods: {
			getEntrusHistory(payPassword){
				this.$ajax('/bi/getEntrusHistory',{
					userId:uni.getStorageSync('userinfo').userId
				},"POST").then(res => {
					this.recordList=res.data
				});
			}
		},
		filters:{
			status(value){
				if(value==1){
					return '创建'
				}else if(value==2){
					return '部分成交'
				}else if(value==3){
					return '完全成交'
				}else if(value==4){
					return '撤回'
				}
			}
		}
	}
</script>

<style>
	.order_status{
		flex: 1;
		text-align: right;
		color:#FF3543 ;
	}
	.record_box {
		background: rgba(255, 255, 255, 1);
		border-radius: 12rpx;
		margin: 30rpx 0 0 30rpx;
		padding: 0 31rpx 28rpx 0;
		border-bottom:1rpx solid #F3F3F3 ;
	}
	.aside_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 28rpx;
	}
	.aside_bot {
		display: flex;
		flex-direction: row;
		padding: 10rpx 0;
	}
	.blod {
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
	.m_right {
		margin-right: 11rpx;
	}
	.sell_tab {
		width: 36rpx;
		height: 36rpx;
		background: #FF3543;
		border-radius: 8rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		font-size: 22rpx;
	}
	.buy_tab {
		width: 36rpx;
		height: 36rpx;
		background: rgba(77, 184, 114, 1);
		border-radius: 8rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		font-size: 22rpx;
	}
	.left_content {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
	}
	.coin_name {
		margin: 0 31rpx 0 15rpx;
	}
	.entrust_number,
	.entrust_price {
		display: flex;
		flex-direction: row;
		width: 366rpx;
	}
	.shu{
		margin: 0 10rpx;
	}
</style>
